<template>
  <Table class="baseBox" :dataSource="dictList" :columns="columns">
    <template #header>
      <a-space>
        <a-button size="samll" type="primary" @click="add">新增</a-button>
      </a-space>
    </template>
    <template #action="{ record }">
      <a-space>
        <a @click="edit(record)">编辑</a>
        <a-popconfirm
          title="是否删除？"
          ok-text="确认"
          cancel-text="取消"
          @confirm="del(record)"
        >
          <a>删除</a>
        </a-popconfirm>
      </a-space>
    </template>
  </Table>
  <!-- 编辑 -->
  <Edit v-model:visible="editVisible" :tempData="selectInfo" @reload="reload" />
</template>

<script lang="ts" setup>
import { ref, toRefs, onMounted, watch } from "vue";
import Table from "@/components/Table";
import { dictApi } from "@/api/dict";
import Edit from "./Edit";
import { columns } from "./href";
const props = defineProps({
  dictId: {},
});
const { dictId } = toRefs(props);

const dictList = ref([]);
const selectInfo = ref({});

const editVisible = ref(false);

watch(dictId, (e) => {
  getData(e);
});

async function getData(id) {
  dictList.value = [];
  const data = await dictApi.getChildren({
    id,
  });
  dictList.value = data;
}

function add() {
  selectInfo.value = {};
  editVisible.value = true;
}
function edit(item) {
  selectInfo.value = item;
  editVisible.value = true;
}
async function del(item) {
  const { id } = item;
  await dictApi.delete({ id });

  dictList.value = dictList.value.filter((i) => i.id != id);
}
function reload() {
  getData(dictId.value);
}
</script>

<style lang="less" scoped></style>
